.hero-detail-container{
    height: 100vh;
    background: url('http://127.0.0.1:8090/images/heros/538-bigskin-1.jpg')
}

.hero-detail-container .info{
    width: 300px;
    height:400px;
    background: rgba(0,0,0,0.5);
    position:absolute;
    left: 100px;
    top: 100px;
    padding: 20px;
    color:white;
}


.hero-detail-container .item{
    width: 20%;
    padding: 10px;
    float:left;
    text-align:center;
}

.hero-detail-container .hero-story{
    width: 600px;
    height: 500px;
    overflow-y: scroll;
    background: rgba(0,0,0,0.5);
    position:absolute;
    left: 450px;
    top: 100px;
    padding: 20px;
    color: white;
}